<!--
 * @Author: ReinerLau lk850593913@gmail.com
 * @Date: 2022-09-21 12:53:41
 * @LastEditors: ReinerLau lk850593913@gmail.com
 * @LastEditTime: 2023-02-16 16:31:16
 * @FilePath: \robot\src\views\patroling\BirdAwayControl.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div>
    <div class="text-white mb-7">驱鸟器控制</div>
    <div class="grid gap-2 grid-cols-5 grid-rows-1 w-full h-14 mr-4 mb-7">
      <template v-for="item in buttonList" :key="item.value">
        <el-tooltip effect="light" placement="top" :content="item.content">
          <div
            tabindex="0"
            :class="[
              'bg-[#33434b]',
              'border',
              'border-solid',
              'border-[#627075]',
              'flex',
              'justify-center',
              'items-center',
              'cursor-pointer',
              'active:bg-sky-700',
              'focus:bg-sky-500',
            ]"
            @click="onClick(item.value)"
          >
            <el-icon color="#fff">
              <component :is="item.icon"></component>
            </el-icon>
          </div>
        </el-tooltip>
      </template>
    </div>
    <div class="flex justify-center items-center">
      <span class="text-white mr-5">音量</span>
      <el-slider
        v-model="volume"
        class="flex-1"
        :step="1"
        :min="1"
        :max="30"
        :show-input-controls="false"
        @change="handleChange"
      />
    </div>
  </div>
</template>
<script setup lang="ts">
import { computed, ref } from "vue";
import { patrolingCruise } from "@/api/remote-control.js";
import { ElNotification } from "element-plus";
import { debounce } from "lodash";
import usePatrolingStore from "@/store/patroling";
import { storeToRefs } from "pinia";

const { patrolingInfo } = storeToRefs(usePatrolingStore());
const caritem = computed(() => {
  return patrolingInfo.value.robotid;
});

const buttonList = [
  {
    icon: "Bell",
    value: "01",
    content: "驱鸟",
  },
  {
    icon: "User",
    value: "02",
    content: "驱人",
  },
  {
    icon: "VideoPause",
    value: "03",
    content: "暂停",
  },
  {
    icon: "View",
    value: "05",
    content: "使能",
  },
  {
    icon: "Hide",
    value: "06",
    content: "失能",
  },
];

async function onClick(value) {
  if (!caritem.value) {
    ElNotification({
      title: "提示",
      message: "请选择控制的车辆",
      type: "warning",
    });
    return;
  }
  const data = {
    code: caritem.value,
    param1: "05",
    param2: value,
    param3: "255",
    param4: "ff",
  };
  await patrolingCruise(data);
}

const volume = ref(0);
const changeVolumn = debounce(async () => {
  if (!caritem.value) {
    ElNotification({
      title: "提示",
      message: "请选择控制的车辆",
      type: "warning",
    });
    return;
  }
  const data = {
    code: caritem.value,
    param1: "05",
    param2: "04",
    param3: volume.value,
    param4: "ff",
  };
  await patrolingCruise(data);
}, 500);

function handleChange() {
  changeVolumn();
}
</script>
